<template>
  <div style="display: inline-block">
    <el-select
      v-model="query.siteKey"
      placeholder="请选择"
      :class="this.className"
      :size="size"
      style="margin-right: 20px"
      @change="changeSite"

    >
      <el-option
        v-for="item in siteOptions"
        :label="item.label"
        :value="item.value"
        :key="item.value"
      >
      </el-option>
    </el-select>
    <el-select
      v-show="showCategory"
      v-model="query.categoryId"
      placeholder="请选择"
      :class="this.className"
      :size="size"
      @change="changeCategory"
    >
      <el-option
        v-for="item in categoryOptions"
        :label="!showArticleNum ? item.label : (item.label === '全部分类' ? item.label : `${item.label}(${item.articleNum})`)"
        :value="item.value"
        :key="item.value"
      >
<!--        <template v-if="showArticleNum">-->
<!--          <span style="float: left">{{ item.label }}({{item.articleNum}})</span>-->
<!--          -->
<!--          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.articleNum }}</span>-->
<!--        </template>-->
      </el-option>
    </el-select>
  </div>
</template>

<script>
  import {getCategoryListBySite,getSiteList} from "@/api/site"
export default {
  name: 'SitesSelect',
  props: {
    transitionName: {
      type: String,
      default: 'fade'
    },
    className:{
      type:String,
      default : '',
    },
    size:{
      type:String,
      default:'small'
    },
    showCategory:{
      type : Boolean,
      default : true,
    },
    showArticleNum:{
      type : Boolean,
      default : false,
    }
  },
  data() {
    return {
      visible: false,
      interval: null,
      isMoving: false,
      query:{
        siteKey : '',
        categoryId : '',
      },
      siteOptions : [
        {label:'全部站点',value:''},
      ],
      categoryOptions : [
        {label:'全部分类',value:'',articleNum:0},
      ],
    }
  },
  created() {
    this.getSiteOption()
  },
  methods: {
    changeSite(){
      this.query.categoryId = ''
      this.getCategoryOption()
      this.changeValue()
    },
    changeCategory(){
      this.changeValue()
    },
    changeValue(){
      const obj = this.$attrs.value;
      obj.siteKey = this.query.siteKey
      obj.categoryId = this.query.categoryId

      this.$emit('change', obj);
    },
    getSiteOption(){
      getSiteList().then((res)=>{
        const obj = [
          {label:'全部站点',value:''}
        ];
        const {data} = res
        for (const item of data) {
          obj.push({
            label:item.name,
            value:item.siteKey,
          })
        }
        // obj.push(...data)
        this.siteOptions = obj
      })
    },
    getCategoryOption(){
      if(!this.query.siteKey){
        this.categoryOptions = [
          {label:'全部分类',value:'',articleNum:0}
        ];
        return;
      }
      getCategoryListBySite(this.query.siteKey).then((res)=>{
        const obj = [
          {label:'全部分类',value:'',articleNum:0}
        ];
        const {data} = res;
        for (const item of data) {
          // 对分类层级进行缩进
          let ind = '';
          for (let i = 1; i < item.level; i++) {
            ind += '--';
          }
          obj.push({
            label: ind + item.titleCn,
            value: item.id,
            articleNum: item.articleNum,
          })
          obj[0]['articleNum'] = obj[0]['articleNum'] + item.articleNum
        }
        this.categoryOptions = obj;
      })
    }

  }
}
</script>

<style scoped>
.back-to-ceiling {
  position: fixed;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

.back-to-ceiling:hover {
  background: #d5dbe7;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0
}

.back-to-ceiling .Icon {
  fill: #9aaabf;
  background: none;
}
</style>
